<template>
	<div :class="['tuan-join-wrap',{'head-top-margin':!isApp}]">
		<!--悬浮栏-->
		<div v-if="!isApp" class="fix-bar">
			<fixbar></fixbar>
		</div>
		<!--团详情信息-->
		<div class="join-info clearfix">
			<img :src="joinData.imgUrl" alt="" class="info-img">
			<div class="info-wrap">
				<div class="info-head">
					<i :class="joinData.mdseType | markType"></i>
					<i class="icon-type">{{joinData.type | joinTuanType}}</i><!-- <span class="info-head-title">限未到店新客参团</span> -->
				</div>
				<a ca="pt_v170720_groupdetail_detail_click" class="info-title" :href="detailUrl" v-text="joinData.desc">商品标题</a>
				<div class="info-price-msg">
					<div class="now-price"><span class="tuan-number">{{joinData.num}}人团</span>&nbsp;<em class="symbol">&yen;</em><span class="price-val" v-text="joinData.groupPrice">0</span></div>
					<div class="old-price">单买价:&yen;<span v-text="joinData.price">0</span></div>
				</div>
			</div>
		</div>
		<!--成团列表-->
		<div class="join-member">
			<!--倒计时-->
			<div class="count-time" v-if="groupBuyMyself.status == 1">
				<countTime :endTime="groupBuyMyself.time">
					<template slot="count-time" scope="props">
						还有&nbsp;<span class="count-hour time-style">{{props.hour}}</span>:<span class="count-minute time-style">{{props.minute}}</span>:<span class="count-second time-style">{{props.second}}</span>&nbsp;结束
					</template>
				</countTime>
			</div>
			<!--拼团状态-->
			<div v-if="groupBuyMyself.status == 2 || groupBuyMyself.status == 3 || groupBuyMyself.status == 5" class="join-type">{{groupBuyMyself.status | tuanJoinText}}</div>
			<div v-if="groupBuyMyself.status == 5" class="join-type-em">(有团员未完成支付，及时关注团状态喔~)</div>
			<!--拼团状态-->
			<div class="residue" v-if="groupBuyMyself.status == 1">剩余<span class="num" v-text="groupBuyMyself.num">0</span>人成团</div>
			<!--参加人员列表-->
			<ol class="join-staff clearfix">
				<li v-for="item in tuanMemberList" :class="['staff-item',{'item-img-default':item == 'null'}]"><img v-if="item != 'null'" :src="item" alt="头像1" class="item-img" /></li>
			</ol>
		</div>
		<!--团推荐 slogan:口号，暂时写死-->
		<div v-if="recommendType && recommendData.length > 0" class="recommend">
			<recommend :recommendData="recommendData" :slogan="slogan" :prizeCode="prizeCode"></recommend>
		</div>
		<!--查看使用门店 需要传递spuCode-->
		<div class="quer-store" v-if="joinData.mdseType == 0">
			<a ca="pt_v170720_groupdetail_store_click" :href="queryStoreUrl + joinData.groupBuySpuCode" class="store-btn">查看适用门店<i class="icon-arrow"></i></a>
			<!-- <query-store :spuCode="joinData.spuCode"></query-store> -->
		</div>
		<!--活动规则-->
		<div class="rule">
			<rule :mdseTypeProp="joinData.mdseType"></rule>
		</div>
		<!--商品描述-->
		<div class="describe">
			<describe :descData="joinData.itemDetail"></describe>
		</div>
		<!--按钮-->
		<div class="join-submit clearfix">
			<!--去邀请-->
			<a v-if="joinData.status == 1"  href="javascript:;" ca="pt_v170720_groupdetail_invite_click" @click="appShareFunc" class="join-btn-normal">还差&nbsp;<span v-text="groupBuyMyself.num">0</span>&nbsp;人拼团成功，去邀请</a>
			<!--一键参团-->
			<a v-if="joinData.status == 2" ca="pt_v170720_groupdetail_join_click" @click="gotoSubmitOrder()" class="join-btn-normal">一键参团</a>
			<!--更多活动，去用券下单-->
			<a v-if="joinData.status == 4" ca="pt_v170720_groupdetail_moregroup_click" href="/cx/cxj/cxjweb/tuan/list/tuan-list.shtml" class="thick fl" :class="{'join-btn-short':joinData.mdseType == 0, 'join-btn-normal': joinData.mdseType != 0}">更多拼团活动</a><a v-if="joinData.status == 4 && joinData.mdseType == 0" :href="joinData.tradeUrl" ca="pt_v170720_groupdetail_usecoupon_click" class="join-btn-short thin fr">去用券下单</a>
			<!--更多活动-->
			<a v-if="joinData.status == 5" ca="pt_v170720_groupdetail_moregroup_click" href="/cx/cxj/cxjweb/tuan/list/tuan-list.shtml" class="join-btn-normal thick">查看更多拼团活动</a>
			<!--直接购买，更多拼团活动-->
			<a v-if="joinData.status == 6" ca="pt_v170720_groupdetail_directbuy_click" :href="joinData.mallUrl" class="join-btn-short thin fl">直接购买</a><a ca="pt_v170720_groupdetail_moregroup_click" v-if="joinData.status == 6" href="/cx/cxj/cxjweb/tuan/list/tuan-list.shtml" class="join-btn-short thick fr">更多拼团活动</a>
		</div>
		<!--低于3.5版本APP调用分享按钮-->

		<a ca="pt_v170720_groupdetail_invite_click" v-if="!isShowShareBtn && isApp" href="javascript:;" @click="shareApp35" class="share-btn"></a>
		<div v-if="popShareHelpType" @click="closeHelp" class="pop-share-help">
			<div class="share-img"></div>
		</div>
		<!--提示信息弹窗-->
		<div v-if="pagePopType" class="page-pop-info">
			<a href="javascript:;" @click="pagePopType = !pagePopType" class="close-pop"></a>
			<h4 class="page-pop-title tc">{{pagePopInfo.pagePopTitle}}</h4>
			<p class="page-pop-content tc">{{pagePopInfo.pagePopContent}}</p>
			<em class="page-pop-em tc">{{pagePopInfo.pagePopEm}}</em>
			<a ca="pt_v170720_groupdetail_creategroup_click" :href="pagePopInfo.pagePopBtnLink" class="page-pop-btn tc">{{pagePopInfo.pagePopBtnText}}</a>
		</div>
		<!--遮罩层-->
		<div v-if="pagePopType" class="page-pop-info-black"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import recommend from '../common/recommend.vue';//团推荐
	//import queryStore from '../common/queryStore.vue';//选择门店
	import rule from '../common/rule.vue';//活动规则
	import describe from '../common/describe.vue';//详情描述
	import countTime from '../common/countTime.vue';//倒计时
	import fixbar from '../common/fixbar.vue';//悬浮栏
	import {Toast, MessageBox} from 'mint-ui';
	import Vue from 'vue';
	export default{
		data (){
			return {
				shareObj:'',
				opentype: common.getCookie('wemall_opentype_c'),
				signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
				staffDefault:'',
				groupId:common.getQueryString('groupId') || '105',//团ID
				//prizeCode:'AGBUYPRIZE001',//商品Code
				prizeCode:common.getQueryString('prizeCode'),
				joinData:'',//团详情页数据
				groupBuyMyself:'',//团详情页面其他数据
				recommendData:[],//参团列表
				recommendType:true,
				tuanTime:'',//倒计时
				slogan:['就等你了','帮我拼团','一起拼团吧','真的很不错','快，参我的团','这价格没谁了'],//团购口号
				getJoinDataUrl:common.isdev() + '/activity/groupbuy/visitGroupDetail.htm',//初始化页面信息请求接口
				detailUrl:window.location.protocol + "//" + window.location.host + '/cx/cxj/cxjweb/tuan/detail/tuan-detail.shtml?prizeCode=' + common.getQueryString('prizeCode'),
				orderUrl:'/cx/cxj/cxjweb/tuan/pay/tuan-pay.shtml',//跳转到订单详情页面链接
				listUrl:'/cx/cxj/cxjweb/tuan/list/tuan-list.shtml',//拼团活动列表页链接
				isShowShareBtn:common.checkAppversionIsGt35(),//验证是否APP版本高于3.5
				isApp:common.isApp(),//验证是否在APP内打开
				checkLoginUrl:common.isdev() + '/activity/groupbuy/checkLogin.htm',//登录验证接口
				checkOldUserUrl:common.isdev() + '/activity/groupbuy/checkByUserId.htm',//验证是否为老用户的接口
				pagePopType:false,
				pagePopInfo:{
					pagePopTitle:'',
					pagePopContent:'',
					pagePopEm:'',
					pagePopBtnText:'',
					pagePopBtnLink:''
				},
				tuanMemberList:[],//参团成员坑位
				popShareHelpType:false,//分享隐藏弹层状态
				queryStoreUrl:'/cx/cxj/cxjweb/tuan/querystore/queryStore.shtml?spuCode='//店门链接
			};
		},
		components: {
			//团推荐
			recommend,
			//查看使用门店
			//queryStore,
			//活动规则
			rule,
			//商品描述
			describe,
			//倒计时
			countTime,
			//悬浮栏
			fixbar
		},
		created (){
			this.initJoin();
		},
		methods: {
			initJoin:function(){
				var _self = this,
					imgUrlLength,
					groupList,
					groupListLength;
				let option = {
						groupId: _self.groupId,//团ID
						prizeCode: _self.prizeCode//团code
					};
				//请求数据
				common.vueAjax('get', _self.getJoinDataUrl, option).then(res => {
					//res.data.result 1:成功 2:失败
					if(res.data.result == 1){
						//对团详情页基础信息
						_self.joinData = res.data.obj.groupDetailVO;
						//跳转到车品下单页或购券下单页
						
						if (_self.joinData.mdseType == 1) {
							_self.orderUrl='/cx/cxj/cxjweb/tuan/pay/tuan-pay-cp.shtml';
						}
						//团详情页其他数据
						_self.groupBuyMyself = res.data.obj.groupBuyMyself;
						//团推荐列表
						groupList = res.data.obj.groupList;
						//换成已成团的人数
						if(_self.groupBuyMyself.imgList){
							imgUrlLength = _self.groupBuyMyself.imgList.length;
						}
						//创建团成员列表
						for(var i = 0; i < _self.joinData.num; i++){
							//添加团成员，没有的则为传空
							if(imgUrlLength > 0){
								imgUrlLength--;
								_self.tuanMemberList.push(_self.groupBuyMyself.imgList[i]);
							}else{
								_self.tuanMemberList.push('null');
							}

						}
						console.log(groupList);
						//团推荐数据赋值处理
						//过滤数据只显示2条
						if(groupList.length > 0){
							
							groupListLength = 2;

							if (groupList.length < groupListLength) {
								groupListLength = groupList.length;
							}
							for(var i = 0; i < groupListLength; i++){

								_self.recommendData.push(groupList[i])

							}

						}

						this.$nextTick(function () {
	             			common.ANA_AnalyticsScan();
	             		});

					}
					//执行显示或隐藏的团推荐模块
					_self.recommendShow(_self.joinData.status);

					_self.shareFunc();

				}, err => console.log(err));
			},
			//显示隐藏团推荐模块
			recommendShow:function(status){

				var _self = this;
					//判断当前参团状态，显示或隐藏推荐团模块
					if(status == '1' || status == '2' || status == '3' || status == '4' || status == '5'){

						_self.recommendType = false;

					}else{

						_self.recommendType = true;

					}
			},
			//分享方法
			shareFunc:function(){
				var _self = this;
					//定义分享时的参数
					_self.shareObj = {
						friend: {
							desc:'车享家人气拼团，我' + _self.joinData.groupPrice + '元买了' + _self.joinData.desc,
							title: '车享家人气拼团，邀请你也来试试。上汽直营，全国千家门店',
							link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?prizeCode=' + _self.prizeCode + '&utm_source=share&groupId=' + _self.groupId,
							imgUrl: _self.joinData.imgUrl
						},
						friendQuan: {
							desc:'车享家人气拼团，我' + _self.joinData.groupPrice + '元买了' + _self.joinData.desc,
							title:'车享家人气拼团，我' + _self.joinData.groupPrice + '元买了' + _self.joinData.desc,
							//title: '已有' + _self.joinData.count + '人成功参团，一起来拼团吧！',
							link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?prizeCode=' + _self.prizeCode + '&utm_source=share&groupId=' + _self.groupId,
							imgUrl: _self.joinData.imgUrl
						}
					};
					console.log(_self.shareObj.friendQuan.link);
					//判断是否在APP内
					if(!common.isApp()){
						//执行微信
						//alert('isApp');
						common.wxShare(_self);
					 //判断APP版本是否低于3.5
					}else if(_self.isShowShareBtn){
						//分享方法
						//alert('3.5版本判断');
						setTimeout(function(){
							common.appShare(_self);
						},1000);
						
					}
			},
			//APP分享方法
			appShareFunc:function(){
				var _self = this;
				console.log(_self.shareObj.friend.link);
				//判断是否在APP内
				if(common.isApp()){

					lb.shareInfo({
	                    title: _self.shareObj.friend.title,
	                    url: _self.shareObj.friend.link,
	                    content: _self.shareObj.friend.desc,
	                    imgUrl: _self.shareObj.friend.imgUrl
	                } ,(data) => {
	                    if (data.errorCode === '0') {
	                        //Toast('分享成功');
	                    }else{
	                        Toast('分享失败');
	                    }
	                });
					//common.appShare(_self);

				}else{

					_self.popShareHelpType = true;
					document.body.style.overflowY = 'hidden';
					common.wxShare(_self);

				}

			},
			//分享方法，低于3.5版本调用
			shareApp35:function(){

				var _self = this;

				common.appShare(_self);

			},
			//关闭规则页面
			closeHelp:function(){

				var _self = this;

				_self.popShareHelpType = !_self.popShareHelpType;

				document.body.style.overflowY = 'scroll';

			},
			//跳转至提交订单页面
			gotoSubmitOrder:function(){

				var _self = this,
					h = window.location.protocol + "//" + window.location.host;

				common.vueAjax('post', _self.checkLoginUrl).then(res => {

					if(res.data.result == -99){
						
						common.goLogin();

					}else{
						
						_self.checkOldUser(res.data.result.userId);

					}

				},err => {

					console.log(err);

				});

			},
			//验证是否为老用户
			checkOldUser:function(userId){

				var _self = this;

				let option = {

						prizeCode:_self.prizeCode,
						//userId:userId
						userId:userId

					}

				common.vueAjax('post', _self.checkOldUserUrl, option).then(res => {
					//失败result == 0,成功result == 1,只有新人才可以参加result == 2,该商品已达到上限人数result == 3
					switch(res.data.result){

						case 0:
							Toast(res.data.msg);
							break;
						case 1:
							_self.gotoSubmitOrderLink();
							break;
						case 2:
							_self.pagePopInfo.pagePopTitle = '抱歉！仅限新客';
							_self.pagePopInfo.pagePopContent = '此商品仅限未到车享家门店消费过的新客户参团哦';
							_self.pagePopInfo.pagePopEm = '你已经是老朋友啦';
							_self.pagePopInfo.pagePopBtnText = '自己开团';
							_self.pagePopInfo.pagePopBtnLink = _self.detailUrl;
							_self.pagePopType = true;
							break;
						case 3:
							_self.pagePopInfo.pagePopTitle = '抱歉！';
							_self.pagePopInfo.pagePopContent = '此商品每位用户限购' + res.data.obj + '件';
							_self.pagePopInfo.pagePopEm = '看看其他拼团活动吧';
							_self.pagePopInfo.pagePopBtnText = '更多拼团活动';
							_self.pagePopInfo.pagePopBtnLink = _self.listUrl;
							_self.pagePopType = true;
							break;

					}

				},err => {

					console.log(err);

				})

			},
			//跳转至订单提交页面
			gotoSubmitOrderLink:function(){
				var _self = this,
					h = window.location.protocol + "//" + window.location.host;

				if(_self.opentype != 6){
					window.location.href = _self.signUrl + "/wxoauth2/s/setOpenIdToCookie.htm?turl=" + h + _self.orderUrl + '?prizeCode=' + _self.prizeCode + '&groupId=' + _self.groupId;
				}else{
					window.location.href = h + _self.orderUrl + '?prizeCode=' + _self.prizeCode + '&groupId=' + _self.groupId;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/common.scss";
	body{
		background-color:#fff;
		-webkit-overflow-scrolling:touch;
	}

	.join-info{
		padding:rem(13);
		border-top:1px solid #e7e7e7;
		border-bottom:1px solid #e7e7e7;
		background-color:#fff;
		.info-img{
			width:rem(165);
			height:rem(110);
			float:left;
		}
		.info-wrap{
			width:rem(173);
			float:right;
		}
		.info-head{
			font-size: 0;
			color:#ff6600;
			margin-bottom:rem(8);
		}
		
		
		.mark-type-01 {
			display: inline-block;
			vertical-align: top;
			width: 6rem;
			height:1.8rem;
			margin-right: 0.5rem;
			padding: 0;
			background:url(../../../assets/image/tuan/mark/mark-type-01.png) center center no-repeat;
			background-size: contain;
		}
		.mark-type-02 {
			display: inline-block;
			vertical-align: top;
			width: 6rem;
			height:1.8rem;
			margin-right: 0.5rem;
			padding: 0;
			background:url(../../../assets/image/tuan/mark/mark-type-02.png) center center no-repeat;
			background-size: contain;
		}
		/*info-head团购状态的小标签*/
		.icon-type{
			padding:0 rem(3);
			height:rem(18);
			line-height:rem(18);
			text-align:center;
			font-size:rem(11);
			display:inline-block;
			background-color:#ffefe5;
			margin-right:rem(11);
		}
		.info-title{
			width:100%;
			max-height:rem(42);
			overflow:hidden;
			color:#000;
			font-size:rem(15);
			margin-bottom:rem(5);
			display:block;
		}
		.info-price-msg{

		}
		.now-price{
			font-size:rem(15);
			color:#e62116;
			margin-bottom:rem(4);
			.symbol{
				display:inline-block;
				font-size:rem(10);
			}
			.price-val{
				max-width:rem(110);
				display:inline-block;
				overflow:hidden;
				vertical-align: bottom;
			}
			.tuan-number{
				font-size:rem(13);
				color:#000;
			}
		}
		.old-price{
			font-size:rem(11);
			color:#999;
		}
	}
	/*倒计时样式*/
	.count-time{
		width:100%;
		text-align:center;
		font-size:rem(15);
	}
	.time-style{
		padding:0 rem(3);
		line-height:rem(22);
		color:#fff;
		background-color:#323232;
		border-radius:2px;
		display:inline-block;
		margin:0 rem(3);
	}
	/*内容部分*/
	.join-member{
		padding:rem(15) rem(15) 0 rem(15);
		background-color:#fff;
		border-bottom:rem(8) solid #f6f6f6;
		overflow:hidden;
		.join-type{
			text-align:center;
			font-size:rem(15);
			color:#ff6600;
			margin:rem(8) 0 rem(10) 0;
		}
		.join-staff{
			width:110%;
		}
		.staff-item{
			float:left;
			margin-right:rem(16.7);
			margin-bottom:rem(15);
			border-radius: 50px;
			.item-img{
				width:rem(56);
				height:rem(56);
				border-radius: 50px;
			}
		}
		.item-img-default{
			width:rem(56);
			height:rem(56);
			background:#f6f6f6 url('../../../assets/image/tuan/what.png') no-repeat center center;
			background-size:rem(14) rem(23);
			border-radius: 50px;
		}
		/*修补型样式*/
		.staff-item:last-child{
			margin-right:0;
		}
		.join-type-em{
			margin-bottom:rem(15);
			font-size:rem(13);
			color:#999;
			text-align:center;
		}
	}
	/*查看使用门店*/
	.store-btn{
		padding:rem(12) rem(14);
		background-color:#fff;
		display:block;
		font-size:rem(15);
		color:#000;
		border-bottom:rem(8) solid #f6f6f6;
	}
	.icon-arrow{
		float:right;
		width:rem(7);
		height:rem(12);
		background:url('../../../assets/image/tuan/arrow.png') no-repeat;
		background-size:100% 100%;
		display:block;
		margin-top:rem(4);
	}
	/*活动规则*/
	.rule{
		padding:rem(11) rem(15) rem(16) rem(15);
		background-color:#fff;
		border-bottom:rem(8) solid #f6f6f6;
	}

	/*一键参团*/
	.join-submit{
		width:100%;
		padding:rem(8) rem(10);
	    border-top: 1px solid #e7e7e7;
		background-color:#fff;
		position:fixed;
		left:0;
		right:0;
		bottom:-2px;
	}
	.join-btn-normal{
		width:100%;
		height:100%;
		line-height:rem(44);
		background-color:#ff6600;
		border-radius:4px;
		display:block;
		font-size:rem(17);
		text-align:center;
		margin:0 auto;
		color:#fff;
		border:1px solid;
	}
	.join-btn-short{
		width:rem(168);
		height:rem(42);
		line-height:rem(44);
		text-align:center;
		border:1px solid #ff6600;
		border-radius:4px;
		font-size:rem(17);
		display:inline-block;
	}
	.thin{
		background:#ff6600 !important;
		color:#fff !important;
	}
	.thick{
		background:rgba(255,102,0,0.10) !important;
		color:#ff6600 !important;
	}
	/*分享按钮*/
	.share-btn{
		width:rem(50);
		height:rem(50);
		display:block;
		background:url('../../../assets/image/tuan/share.png') no-repeat;
		background-size:100% 100%;
		position:fixed;
		right:1rem;
		bottom:10%;
	}
	/*拼团剩余*/
	.residue{
		font-size:rem(15);
		text-align:center;
		margin:rem(10) 0;
		.num{
			color:#ff6600;
		}
	}
	/*悬浮栏*/
	.fix-bar{
		width:100%;
		position:fixed;
		top:0;
		left:0;
	}
	//追加一个头部位置
	.head-top-margin{
		margin-top:rem(55);
	}
	/*微信分享引导*/
	.pop-share-help{
		width:100%;
		height:100%;
		position:fixed;
		z-index:9999;
		top:0;
		left:0;
		bottom:0;
		right:0;
		margin:auto;
		background-color:rgba(0, 0, 0, 0.7);
	}
	.share-img{
		position:absolute;
		top:rem(15);
		right:rem(15);
		background:url('../../../assets/image/tuan/icon-help.png') no-repeat;
		background-size:100% 100%;
		width:rem(172);
		height:rem(75);
	}
	/*页面按钮信息弹层*/
	.page-pop-info{
		width:rem(270);
		height:rem(267);
		position:fixed;
		top:rem(201);
		left:0;
		right:0;
		margin:0 auto;
		background-color:#fff;
		border-radius:8px;
		z-index:1001;
		/*关闭按钮*/
		.close-pop{
			width:rem(15);
			height:rem(15);
			background:url('../../../assets/image/tuan/close.png') no-repeat;
			background-size:100% 100%;
			display:block;
			position:absolute;
			top:rem(10);
			right:rem(10);
		}
		/*信息弹层标题*/
		.page-pop-title{
			font-size:rem(19);
			color:#030303;
			margin-top:rem(44);
		}
		/*信息弹层内容*/
		.page-pop-content{
			padding:0 rem(15);
			font-size:rem(17);
			color:#666;
			margin-top:rem(25);
		}
		/*信息弹层描述*/
		.page-pop-em{
			width:100%;
			display:inline-block;
			font-size:rem(13);
			color:#999;
			margin-top:rem(20);
		}
		/*信息弹层按钮*/
		.page-pop-btn{
			width:rem(170);
			height:rem(44);
			line-height:rem(44);
			display:block;
			margin:rem(24) auto 0 auto;
			font-size:rem(17);
			color:#fff;
			background-color:#ff6600;
			border-radius:4px;
		}
	}
	.page-pop-info-black{
		display:block;
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		margin:auto;
		background-color:rgba(0,0,0,0.8);
		z-index:1000;
	}
</style>
